<!DOCTYPE HTML>
<html xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
    <head>
        <title>首页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge">
        <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
        <link rel="stylesheet" href="./lib/vant/index.css">
        <script src="./lib/vant/vant.min.js"></script>
        <style type="text/css">
            body {
                background-color: #f7f8fa;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div >
                <van-nav-bar title="控制面板">
                    <van-icon
                            name="arrow-left"
                            slot="left"
                            :size="25"
                            @click="back"/>
                </van-nav-bar>
                <div style="padding: 5px 10px;">
                    <!--
                    <p>用户信息</p>
                    <van-cell-group>
                        <van-field v-model="userId" label="用户ID" />
                    </van-cell-group>
                    -->

                    <!-- 温度 -->
                    <p>环境监控</p>
                    <van-cell-group>
                        <van-field v-model="temperature" label="温度" readonly />
                    </van-cell-group>

                    <!-- 开关 -->
                    <p>开关控制</p>
                    <van-cell-group>
                        <van-field
                                center
                                v-for="item,index in ledArr"
                                :label="'灯' + (index + 1)"
                        >
                            <div slot="input" style="width: 100%; text-align: right;">
                                <van-switch
                                        size="24px"
                                        active-color="#07c160"
                                        v-model="ledArr[index]"
                                        @change="change(index)"
                                        :disabled="!canBeControl"/>
                            </div>
                        </van-field>
                    </van-cell-group>
                </div>
            </div>
        </div>

        <script type="text/javascript">
            new Vue({
                el: "#app",
                data: {
                    userId: "",
                    temperature: "25.50 ℃",
                    deviceId: "",
                    ledArr: [false, false, false, false, false, false, false, false],
                    onCommand: false,
                    canBeControl: false
                },
                mounted () {
                    this.init();
                },
                methods: {
                    init () {
                        var search = window.location.search;
                        if(search.trim() == "") {
                            window.location.href = "./index.html";
                            return;
                        }

                        var params = {};
                        search.substring(1).split("&").forEach(item => {
                            var tArr = item.split("=");
                            params[tArr[0]] = tArr.length > 1 ? tArr[1] : "";
                        });

                        this.deviceId = params.id;

                        setInterval(() => this.queryDevicesStatus(), 3000);
                        this.queryDevicesStatus();
                    },

                    queryDevicesStatus () {
                        if(this.onCommand) {
                            return;
                        }

                        $.getJSON('/api/devices/' + this.deviceId, data => {
                            var device = data;

                            if(this.onCommand) {
                                return;
                            }

                            var led = device.data.led || "00000000";
                            var len  = led.length;
                            for(var i = 0; i < len; i++) {
                                this.$set(this.ledArr, i, led[i] === "1");
                            }
                            this.temperature = (device.data.temp ? (parseInt(device.data.temp) / 100) : "/") + " ℃";
                            this.canBeControl = device.status === 1;
                        });
                    },

                    change (index) {
                        /*
                        if(this.userId.trim().length == 0) {
                            this.$notify({ type: 'warning', message: '请输入操作者ID' });
                            this.ledArr[index] = !this.ledArr[index];
                            return;
                        }
                         */

                        this.onCommand = true;
                        var newStatus = this.ledArr.map(status => status ? "1" : "0").join("");
                        //console.log(newStatus);

                        var formData = {
                            deviceId: this.deviceId,
                            command: newStatus
                        };

                        this.$toast.loading({
                            duration: 0,
                            message: '操作中...',
                            forbidClick: true,
                            loadingType: 'spinner'
                        });

                        $.post('/api/control', formData, data => {
                            // ...
                            // setTimeout(() => this.queryDevicesStatus(), 1000);
                            this.onCommand = false;
                            if(data.code == 200) {
                                this.$notify({ type: 'success', message: '操作成功' });
                            } else {
                                this.$notify({ type: 'danger', message: '操作失败' });
                                this.queryDevicesStatus();
                            }
                            this.$toast.clear();
                        }, "JSON");
                    },

                    back () {
                        window.location.href = "./index.html";
                    }
                }
            });
        </script>
    </body>
</html>